<template>
  <div id="hjtjChar" style="width:100%;height:100%"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    setTimeout(() => {
      this.getChars();
    }, 200);
  },
  methods: {
    getChars() {
      let dataList = [10700, 16500, 28700, 35600];
      let colorList = ["#EBD502", "#0AD49B", "#02D4FF", "#3478FF"];
      let datas = [];
      dataList.forEach((item, index) => {
        datas[index] = {
          type: "bar",
          data: [{ value: item, name: "a" + index }],
          coordinateSystem: "polar",
          name: "a" + index,
          stack: "a" + index,
          // emphasis: {
          //   focus: "series"
          // },
          color: colorList[index]
        };
      });

      var myChart = this.$echarts.init(document.getElementById("hjtjChar"));
      var option = {
        barWidth: "8%",
        angleAxis: {
          show: false
        },
        radiusAxis: {
          show: false,
          type: "category",
          z: 30
        },
        legend: {
          show: true,
          data: datas,
          left: "6%",
          top: "20%",
          orient: "vertical",
          itemWidth: this.$fontSize(0.25),
          itemHeight: this.$fontSize(0.25),
          textStyle: {
            fontSize: this.$fontSize(0.20),
            color: colorList
          }
        },
        polar: {},
        series: datas
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>